<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text">

  <button>点赞</button>
  <script>
    let ipt = document.querySelector('input')
    let btn = document.querySelector('button')
    // 封装一个debounce函数，实现防抖功能（频率很快的时候只执行最后一次）

    function debounce(fn) {
      console.log('键盘还没按呢');
      let timerId = null
      // 调用完debounce之后就会得到这个函数，这个函数内部有一个变量timerId，它是保存在一个闭包中的
      return function () {
        clearTimeout(timerId)
        timerId = setTimeout(() => {
          // 此处的this就是事件绑定的那个dom对象
          console.log(this);
          // 将fn内部的this改成事件绑定的那个dom对象
          fn.call(this)
          // fn.apply(this)


          // fn.bind(this)() // 这里不太合适
        }, 300)
      }
    }


    function search() {
      console.log('search', this);
    }
    function like() {
      console.log('一键三连', this);
    }
    ipt.addEventListener('keyup', debounce(search))

    btn.addEventListener('click', debounce(like))

  </script>
</body>

</html>